<template>
  <div class="case">
    <na-table :datas.sync="tableData" :searchObj.sync="search" @updateDatas="getAllLists" @newAdd="newAddOrder" @change="handleSelectChange">
    </na-table>
    <!-- 新建彩稿   -->
    <el-dialog :title="opsid === 1 ? '新建/编辑彩稿' : '查看彩稿'" :visible.sync="showAddDialog" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="70%" @close="closeDialog">
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">彩稿单号：</span>{{ colorManuscriptForm.colorDraftNo || "系统自动生成" }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{
            colorManuscriptForm.billCreateTime || dayjs().format("YYYY-MM-DD")
          }}</span>
          <span><span class="mr5">创建人员：</span>{{
            colorManuscriptForm.billCreateBy
              ? colorManuscriptForm.billCreateBy
              : name
          }}</span>
        </div>
        <div v-if="defclassName" class="info f16" :class="defclassName">
          <svg-icon :icon-class="defclassName" class="mr10 ml15" />{{
            colorManuscriptForm.checkRemark
          }}
        </div>
        <div class="contain flexs">
          <div class="colorPic flex flex_center">
            <div v-if="picList && picList.length > 0" class="flex flex_center w100">
              <div class="img_c w100">
                <img class="img_i" style="max-width: 90%" :src="currentItem.draftFilePreviewUrl" alt="">
              </div>
            </div>
            <el-empty v-else description="暂无彩稿预览图" />
          </div>
          <div class="colorForm flex1">
            <el-form ref="colorManuscriptForm" :model="colorManuscriptForm" label-width="110px" label-position="left"
              class="dialogForm dialogInlineForm p16 serchform" :disabled="opsid !== 1" :rules="rules">
              <el-row>
                <!-- <el-col>
                  <el-form-item label="协议书号" prop="agreementNo">
                    <div class="flex flex_center">
                      <div class="flex1">
                        <el-input
                          v-model="colorManuscriptForm.agreementNo"
                          placeholder="请输入内容"
                          size="mini"
                        />
                      </div>
                      <div v-if="opsid === 1" class="ml10">
                        <el-button
                          type="primary"
                          size="mini"
                          icon="el-icon-search"
                          @click="showOrder = true"
                        >查找</el-button>

                      </div>
                    </div>
                  </el-form-item>
                </el-col> -->
                <el-col>
                  <el-form-item label="产品名称" prop="productName">
                    <div class="flex flex_center">
                      <div class="flex1">
                        <el-input v-model="colorManuscriptForm.productName" :placeholder="placeholderText" size="mini"
                          disabled class="placehoderColor" />
                      </div>
                      <div class="ml10">
                        <el-button size="mini" icon="el-icon-view" @click="previewPic">预览</el-button>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="备注" prop="uploadRemark">
                    <div class="flex flex_center">
                      <div class="flex1">
                        <el-input v-model="colorManuscriptForm.uploadRemark" placeholder="请输入内容" type="textarea"
                          :autosize="{ minRows: 3, maxRows: 4 }" size="mini" />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="w100 p16 card_main">
              <div v-for="(item, index) in picList" :key="index" class="card"
                :class="{ active: currentIndex === index }" @click="selsectCard(item, index)">
                <div class="card_header flex flex_between">
                  <span>彩稿</span><i v-show="showDelete" class="el-icon-delete f16 pointer"
                    @click.stop="deleteColorManuOne(item, index)" />
                </div>
                <div class="card_info p16 C_999aaa">
                  <div class="c_333333 f16 fw">{{ item.fileName }}</div>
                  <div>上传时间: {{ item.uploadDate }}</div>
                  <div>文件大小: {{ convertBytes(item.fileSize) }}</div>
                  <div>
                    文件地址: {{ item.fileUrl
                    }}<i class="el-icon-document-copy ml10 f16 pointer" />
                  </div>
                </div>
              </div>
              <el-upload v-if="opsid === 1 || opsid === 3" class="pic-uploader" action=" " :show-file-list="false"
                :http-request="myUpload">
                <el-button class="w100" type="primary" @click="addColorManu"><i
                    class="el-icon-upload el-icon--right" />上传彩稿</el-button>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showAddDialog = false">取 消</el-button>
        <!-- 新增       -->
        <el-button v-if="opsid !== 0" :loading="addLoading" :disabled="addLoading"
          element-loading-spinner="el-icon-loading" type="primary" size="mini" @click="saveColorManuscript">
          {{ btnName }}</el-button>
      </div>
    </el-dialog>
    <!-- 撤审原因   -->
    <el-dialog title="撤审原因" :visible.sync="isNopassshow" :close-on-click-modal="false" custom-class="comDialog"
      width="40%" @close="closePassDialog">
      <div class="dialogDody">
        <el-form ref="passForm" :model="passForm" class="dialogForm">
          <el-form-item class="mt12">
            <el-input v-model="passForm.applyReason" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 6 }"
              size="mini" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isNopassshow = false">取 消</el-button>
        <el-button v-loading="addLoading" :disabled="addLoading" element-loading-spinner="el-icon-loading"
          type="primary" size="mini" @click="passSave">提交</el-button>
      </span>
    </el-dialog>
    <SelectOrderList :per-visible.sync="showOrder" @current="selectCurrentRow" />
  </div>
</template>
<script>
  import naTable from "@/components/naTable";
  import SelectOrderList from '@/components/selectOrder' 
  import {
    arraySort
  } from '@/utils'
  import {
    mapGetters
  } from 'vuex'
  import {
    formatbytes
  } from '@/utils'
  export default {
    name: 'PlaceAnOrder',
    components: {
      naTable,
      SelectOrderList,
    },
    data() {
      return {
        // opsid: "add", // 彩稿 pass refuse waitCancel add
        opsid: 0, // 0待确认；1待审核（已确认）；2审核通过；3审核未通过；4撤审中
        checkOrAdd: 0, // 0 添加 1 修改
        showOrder: false,
        opstext: ['保存', '保存', '撤审', '重新上传', '取消撤审'],
        tpisColor: ['', '', 'pass', 'refuse', 'waitCancel'], // pass waitCancel refuse
        tpisIndex: 0,
        types: 0,
        searchLoading: false, // 列表loading
        showAddDialog: false, // 查看弹框是否打开
        isMarterdialog: false, // 协议书号查找
        addLoading: false, // 新建保存加载效果
        marLoading: false, // 彩稿订单加载效果
        isNopassshow: false,
        showDelete: false,
        marTotale: 0,
        placeholderText: '选择订单后展示',
        search: {
          QueryDataBaseFiled: '',
          pageIndex: 1,
          pageSize: 30,
          likeWords: '',
          colorDraftState: '-1'
        }, // 彩稿搜索条件
        colorManuscriptForm: {
          orderNo: '',
          agreementNo: '',
          uploadRemark: ''
        }, // 新建彩稿表单
        passForm: {
          applyReason: ''
        },
        picList: [],
        currentIndex: 0,
        currentItem: null,
        total: 0,
        dataLists: [],
        tableHead: [],
        tableHeight: null,
        currentRow: null,
        rules: {
          agreementNo: [{
            required: true,
            message: '请选择关联订单',
            trigger: 'change'
          }]
        },

        tableData: {
          headId: 'head', //表头列显隐组件所需ID-避免多个页面id重复问题
          tableId: 'checkBillID', //表格列表key,也就是一条数据的唯一标识
          senior: false, //高级搜索是否显示
          disableWord: '', //是否禁用显示的字段
          disableStatus: '', //判断未禁用的状态值
          // addTitle: '', //新建按钮名称-为''则不显示，为undefine则为默认-新建
          addPermission: 'MenuCode1-5-1', //新建按钮权限
          voidWord: '', //需要查询作废的字段
          statusList: [{
              label: '全部',
              value: '-1'
            },
            {
              label: '待确认',
              value: '0'
            },
            {
              label: '待审核',
              value: '1'
            },
            {
              label: '审核拒绝',
              value: '3'
            },
            {
              label: '撤审拒绝',
              value: '4'
            },
            {
              label: '完成',
              value: '5'
            },
            {
              label: '撤单',
              value: '2'
            },
          ], //状态筛选条件列表
          statusWord: 'colorDraftState', //状态筛选的字段
          //表格按钮
          operationBtn: [{
              title: '查看', //按钮名称
              methodsName: 'handleClick', //按钮绑定方法的字段
              hideCondition: { //按钮显隐条件
                prop: 'colorDraftState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-类型保持一致
                ],
                except: 0, //除了某个状态其他都可以使用
              },
            },
            {
              title: '修改',
              methodsName: 'handleUpdata',
              permission: "MenuCode1-5-2", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'colorDraftState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  0,
                ],
              },
            }, {
              title: '确认彩稿',
              methodsName: 'handleConfirm',
              permission: "MenuCode1-5-3", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'colorDraftState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  0,
                ],
              },
            },
            {
              title: '删除',
              methodsName: 'handleDelete',
              permission: "MenuCode1-5-4", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'colorDraftState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  0,
                ],
              },
            },
            {
              title: '取消审核',
              methodsName: 'handleCancelCheck',
              permission: "MenuCode1-5-7", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'colorDraftState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  1,
                ],
              },
            },
            {
              title: '重新上传',
              methodsName: 'handleReUpload',
              permission: "MenuCode1-5-6", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'colorDraftState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  3,
                ],
              },
            },
            {
              title: '撤审',
              methodsName: 'handleExamine',
              permission: "MenuCode1-5-5", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'isCancel', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  1,
                ],
              },
            },
            {
              title: '重新撤审',
              methodsName: 'handleExamine',
              permission: "MenuCode1-5-9", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'colorDraftState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  5,
                ],
              },
            },
            {
              title: '取消撤审',
              methodsName: 'handleCancelExamine',
              permission: "MenuCode1-5-8", //按钮权限
              hideCondition: { //按钮显隐条件
                prop: 'colorDraftState', //控制显隐的状态字段
                show: [ //有哪些状态可以使用-值必须跟状态的类型保持一致
                  4,
                ],
              },
            },
          ],
          //表格内容
          tbody: [],
          //表格表头
          thead: [],
        }
      }
    },
    computed: {
      ...mapGetters(['name']),
      btnName() {
        return this.opstext[this.opsid]
      },
      defclassName() {
        return this.tpisColor[this.tpisIndex]
      }
    },
    created() {
      // 彩稿上传列表表格表头
      this.getTableHead()
      this.getAllLists();
      this.currentItem = this.picList[0]
    },
    mounted() {},
    methods: {
      //  彩稿弹窗
      newAddOrder() {
        this.showOrder = true
        // this.opsid = 1
        // this.checkOrAdd = 0
        // this.tpisIndex = 0
        // this.showDelete = true
        // this.showAddDialog = true
        // this.currentItem = null
        // this.colorManuscriptForm.orderNo = ''
        // this.picList = []
        // if (this.$refs.colorManuscriptForm) {
        //   this.$refs.colorManuscriptForm.resetFields()
        // }
      },
      // 撤销审核原因
      passSave() {
        const {
          draftID,
          orderNo
        } = this.colorManuscriptForm
        const _dataId = {
          draftID,
          orderNo
        }
        const _data = Object.assign(_dataId, this.passForm, {})
        this.$api.business.ApplyColorDraftCarefulCheck(_data).then((res) => {
          this.isNopassshow = false
          this.showAddDialog = false
          this.getAllLists()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      },
      selectCurrentRow(row) {
        this.$router.push({
          path: '/business/colorDetail', // 跳转的路径
          query: {
            saleOrderNo: row.orderNo
          }
        })
      },

      handleSelectChange(){
        this.search.pageIndex = 1
        this.getAllLists()
      },

      // 新增 保存 修改彩稿
      saveColorManuscript() {
        this.$refs.colorManuscriptForm.validate((valid) => {
          if (valid) {
            if (this.opsid === 2) {
              this.isNopassshow = true
            } else if (this.opsid === 4) {
              const {
                draftID,
                orderNo
              } = this.colorManuscriptForm
              const _data = {
                draftID,
                orderNo
              }
              this.$api.business
                .CancelCarefulCheckColorDraft(_data)
                .then((res) => {
                  this.showAddDialog = false
                  this.getAllLists()
                  this.$message({
                    type: 'success',
                    message: '撤审成功!'
                  })
                })
            } else if (this.opsid === 3) {
              const _uploadFiles = []
              // eslint-disable-next-line no-unused-vars
              const {
                colorDraftNo,
                orderNo,
                agreementNo,
                uploadRemark
              } =
              this.colorManuscriptForm
              const _parmas = {
                colorDraftNo,
                orderNo,
                agreementNo,
                uploadRemark
              }
              this.picList.forEach((item) => {
                var {
                  uploadDate,
                  originalName,
                  fileName
                } = item
                _uploadFiles.push({
                  uploadFileDate: uploadDate,
                  originalName,
                  uploadFileName: fileName,
                  draftFileID: 0,
                  dealAction: 'add'
                })
              })
              const _data = Object.assign(_parmas, {
                uploadFiles: _uploadFiles
              })
              this.$api.business.UpdateColorDraftBill(_data).then((res) => {
                this.showAddDialog = false
                this.getAllLists()
                this.$message({
                  type: 'success',
                  message: '上传成功!'
                })
              })
            } else if (this.opsid === 1) {
              if (this.checkOrAdd === 0) {
                const _uploadFiles = []
                // eslint-disable-next-line no-unused-vars
                const {
                  billCreateBy,
                  ..._colorManuscriptFormData
                } =
                this.colorManuscriptForm
                this.picList.forEach((item) => {
                  var {
                    uploadDate,
                    originalName,
                    fileName
                  } = item
                  _uploadFiles.push({
                    uploadFileDate: uploadDate,
                    originalName,
                    uploadFileName: fileName
                  })
                })
                const _data = Object.assign(_colorManuscriptFormData, {
                  uploadFiles: _uploadFiles
                })
                this.$api.business.CreateColorDraftBill(_data).then((res) => {
                  this.showAddDialog = false
                  this.getAllLists()
                  this.$message({
                    type: 'success',
                    message: '添加成功!'
                  })
                })
              } else {
                const _uploadFiles = []
                // eslint-disable-next-line no-unused-vars
                const {
                  colorDraftNo,
                  orderNo,
                  agreementNo,
                  uploadRemark
                } =
                this.colorManuscriptForm
                const _parmas = {
                  colorDraftNo,
                  orderNo,
                  agreementNo,
                  uploadRemark
                }
                this.picList.forEach((item) => {
                  var {
                    uploadDate,
                    originalName,
                    fileName
                  } = item
                  _uploadFiles.push({
                    uploadFileDate: uploadDate,
                    originalName,
                    uploadFileName: fileName,
                    draftFileID: 0,
                    dealAction: 'add'
                  })
                })
                const _data = Object.assign(_parmas, {
                  uploadFiles: _uploadFiles
                })
                this.$api.business.UpdateColorDraftBill(_data).then((res) => {
                  this.showAddDialog = false
                  this.getAllLists()
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  })
                })
              }
            }
          }
        })
      },
      // 关闭弹框事件
      closeDialog() {
        // 关闭弹框的时候清空数据
        // this.currentItem = null
        // this.currentItem.draftFilePreviewUrl = ''
        if (this.$refs.colorManuscriptForm) {
          this.$refs.colorManuscriptForm.resetFields()
        }
      },
      // 获取某个订单的彩稿数据
      getOrdersColorDrafts(draftID) {
        this.showAddDialog = true
        this.$api.business.QueryColorDraftDetail(draftID).then((res) => {
          this.colorManuscriptForm = res.baseData
          res.files.forEach((item) => {
            item.fileName = item.draftFileName
            item.fileUrl = item.draftFileUrl
            item.fileSize = item.draftFileSize
            item.uploadDate = item.uploadTime
            item.fileFullUrl = item.draftFilePreview
            // item.draftFilePreviewUrls = item.draftFilePreviewUrl
          })
          this.picList = res.files
          // if (!this.currentItem) {
          this.currentItem = this.picList[0]
          this.currentIndex = 0
          // }
        })
      },
      // 查看彩稿
      handleClick(row) {
        // this.currentItem = null
        this.$router.push({
          path: '/business/colorDetailCheck', // 跳转的路径
          query: {
            draftID: row.draftID,
            colorDraftNo: row.colorDraftNo
          }
        })
        // this.opsid = 0
        // this.showDelete = false
        // this.tpisIndex = row.colorDraftState
        // this.getOrdersColorDrafts({
        //   draftID: row.draftID
        // })
        // this.colorManuscriptForm = row
      },
      // 修改彩稿
      handleUpdata(row) {
        const {
          draftID,
          colorDraftNo
        } = row
        this.$router.push({
          path: '/business/colorDetail', // 跳转的路径
          query: {
            add: true,
            draftID: draftID,
            colorDraftNo: colorDraftNo
          }
        })
      },
      // 确认彩稿
      handleConfirm(row) {
        this.$router.push({
          path: '/business/colorDetailCheck', // 跳转的路径
          query: {
            draftID: row.draftID,
            colorDraftNo: row.colorDraftNo
          }
        })

        // const { draftID, orderNo } = row
        // const _data = { draftID, orderNo }
        // this.$api.business.SaveColorDraftBill(_data).then((res) => {
        //   this.getAllLists()
        //   this.$message({
        //     type: 'success',
        //     message: '确认成功!'
        //   })
        // })
      },
      // 取消审核彩稿
      handleCancelCheck(row) {
        const {
          draftID,
          orderNo
        } = row
        const _data = {
          draftID,
          orderNo
        }
        this.$api.business.CancelCheckColorDraftBill(_data).then((res) => {
          this.getAllLists()
          this.$message({
            type: 'success',
            message: '取消成功!'
          })
        })
      },
      // 重新上传
      handleReUpload(row) {
        const {
          draftID,
          colorDraftNo
        } = row
        this.$api.business
          .ResetColorDraftBill({
            colorDraftNo: colorDraftNo
          })
          .then((res) => {
            this.$router.push({
              path: '/business/colorDetail', // 跳转的路径
              query: {
                add: true,
                draftID: draftID,
                colorDraftNo: colorDraftNo
              }
            })
          })
      },

      // 申请撤审
      handleExamine(row) {
        this.$router.push({
          path: '/business/colorDetailCheck', // 跳转的路径
          query: {
            draftID: row.draftID,
            colorDraftNo: row.colorDraftNo
          }
        })
      },
      // 取消撤审
      handleCancelExamine(row) {
        this.$router.push({
          path: '/business/colorDetailCheck', // 跳转的路径
          query: {
            draftID: row.draftID,
            colorDraftNo: row.colorDraftNo
          }
        })
      },
      // 删除彩稿
      handleDelete(row) {
        const {
          draftID,
          orderNo
        } = row
        const _data = {
          draftID,
          orderNo
        }
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          this.$api.business.DeleteColorDraftBill(_data).then((res) => {
            this.getAllLists()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        })
      },
      // 关闭撤审原因弹窗
      closePassDialog() {
        this.isNopassshow = false
      },
      // 选择某个彩稿
      selsectCard(item, index) {
        this.currentItem = item
        this.currentIndex = index
      },
      // 删除某个彩稿文件
      deleteColorManuOne(item, index) {
        const {
          orderNo
        } = this.colorManuscriptForm
        const {
          colorDraftNo,
          draftFileID
        } = item
        const _data = {
          orderNo,
          colorDraftNo,
          draftFileID
        }
        if (item.draftFileID) {
          this.$confirm('是否删除该文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          }).then(() => {
            this.$api.business.DeleteColorDraftFile(_data).then((res) => {
              this.picList.splice(index, 1)
              if (this.picList.length > 0) {
                this.currentItem = this.picList[0]
                this.currentIndex = 0
              }
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
          })
        } else {
          this.picList.splice(index, 1)
          if (this.picList.length > 0) {
            this.currentItem = this.picList[0]
            this.currentIndex = 0
          }
        }
      },
      // 添加彩稿
      addColorManu() {},
      // 彩稿上传
      myUpload(e) {
        const file = e.file
        const type = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (
          type !== 'png' &&
          type !== 'jpg' &&
          type !== 'jpeg' &&
          type !== 'gif' &&
          type !== 'bmp'
        ) {
          this.$message.error('上传图片格式错误，请重新上传!')
          return false
        } else {
          var formData = new FormData()
          formData.append('file', file)
          this.$api.common.UploadSingleFile(formData).then((res) => {
            res.draftFilePreviewUrl = res.fileFullUrl
            this.picList.push(res)
            if (!this.currentItem) {
              this.currentItem = res
            }
          })
        }
      },
      // 彩稿预览
      previewPic() {
        if (this.currentItem) {
          window.open(this.currentItem.draftFilePreviewUrl)
        } else {
          this.$message({
            type: 'error',
            message: '请先选择订单!'
          })
        }
      },
      // 文件大小单位换算
      convertBytes(val) {
        return formatbytes(val)
      },
      // 获取彩稿列表表格表头
      getTableHead() {
        const parmas = {
          tableCode: this.$config.uploadcolordraftlist
        }
        this.$api.common.getAllTableHead(parmas).then((res) => {
          res.sort(arraySort('columnSort'))
          this.tableData.thead = res;
        })
      },
      // 彩稿数据列表
      getAllLists() {
        const parmas = this.search
        this.searchLoading = true
        this.$api.business
          .QueryPageColorDraftList(parmas)
          .then((res) => {
            let list = res.list;
            if (list.length > 0) {
              list.forEach((item) => {
                item.isCancel = 0; //允许撤单
                if (item.colorDraftState === 2 && item.isFinal === 0) {
                  item.isCancel = 1;
                }
              });
            }
            this.tableData.tbody = list;
            this.search.total = res.totalCount;
            this.searchLoading = false
          })
          .catch(() => {
            this.searchLoading = false
          })
      }
    }
  }

</script>
<style lang="scss" scoped>
  .contain {
    height: 100%;

    .colorPic {
      height: 100%;
      width: 68%;
      overflow: hidden;
      border-right: 1px solid #d8d8d8;

      .img_c {
        text-align: center;

        .img_i {
          max-width: 90%;
        }
      }
    }

    .colorForm {
      overflow-y: auto;

      .serchform {
        border-bottom: 1px solid #d8d8d8;
      }
    }
  }

  ::v-deep .pic-uploader .el-upload {
    width: 100%;
  }

  ::v-deep .placehoderColor input::placeholder {
    font-weight: bold;
    color: #333333 !important;
  }

  .subTip {
    border-bottom: 1px #e6e6e6 solid;
    background: #f5f6f9;
    padding: 8px 16px;
  }

  .card_main {
    max-height: 340px;

    .card {
      border: 1px solid #e6e6e6;
      border-radius: 2px 2px 0px 0px;
      margin-bottom: 8px;

      &.active {
        border: 1px solid #3f61f1;

        .card_header {
          background-color: #3f61f1;
          color: #ffffff;
        }
      }

      .card_header {
        line-height: 32px;
        padding: 6px 16px;
        border-bottom: 1px solid #e6e6e6;
        background-color: #ffffff;
        color: #333333;
      }

      .card_info {
        line-height: 16px;

        div {
          margin-top: 8px;
        }
      }
    }
  }

  .info {
    line-height: 32px;

    &.refuse {
      color: #e13335;
      background-color: #fce6e6;
    }

    &.pass {
      color: #6bc53f;
      background-color: #f1ffea;
    }

    &.waitCancel {
      color: #3f61f1;
      background-color: #dee4ff;
    }
  }

</style>
